<!-- 日历选择 -->
<template>
	<view class="vk-data-input-calendar">
		<!-- 页面开始 -->
		<u-input
			v-if="showInput"
			type="select"
			:value="valueToTextCom"
			:modelValue="valueToTextCom"
			:placeholder="placeholder"
			:input-align="inputAlign"
			@click="isShow = true"
		></u-input>
		<!--日历选择器 -->
		<u-calendar
			:value="isShow"
			:modelValue="isShow"
			:mode="mode"
			:safe-area-inset-bottom="safeAreaInsetBottom"
			:change-year="changeYear"
			:change-month="changeMonth"
			:max-year="maxYear"
			:min-year="minYear"
			:min-date="minDate"
			:max-date="maxDate"
			:border-radius="borderRadius"
			:mask-close-able="maskCloseAble"
			:month-arrow-color="monthArrowColor"
			:year-arrow-color="yearArrowColor"
			:color="color"
			:active-bg-color="activeBgColor"
			:z-index="zIndex"
			:active-color="activeColor"
			:range-bg-color="rangeBgColor"
			:range-color="rangeColor"
			:start-text="startText"
			:end-text="endText"
			:btn-type="btnType"
			:toolTip="toolTip"
			:closeable="closeable"
			@input="onPopupShow"
			@change="onChange"
		></u-calendar>

		<!-- 页面结束 -->
	</view>
</template>

<script>
export default {
	name: "vk-data-input-calendar",
	emits: ["update:modelValue", "input", "update:show","change"],
	props: {
		// 表单值
		value: {},
		modelValue: {},
		// 是否显示input
		showInput: {
			type: Boolean,
			default: true
		},
		show: {
			type: Boolean,
			default: false
		},
		// 提示
		placeholder: {
			Type: String,
			default: "请选择"
		},
		// 是否禁用
		disabled: {
			type: Boolean,
			default: false
		},
		// 输入框文字的对齐方式
		inputAlign: {
			type: String
		},
		safeAreaInsetBottom: {
			type: Boolean,
			default: true
		},
		// 弹出的z-index值
		zIndex: {
			type: [String, Number],
			default: 0
		},
		// 是否允许切换年份
		changeYear: {
			type: Boolean,
			default: true
		},
		// 是否允许切换月份
		changeMonth: {
			type: Boolean,
			default: true
		},
		// 选择日期的模式，date-为单个日期，range-为选择日期范围
		mode: {
			type: String,
			default: "date"
		},
		// 可切换的最大年份
		maxYear: {
			type: [Number, String],
			default: 2100
		},
		// 可切换的最小年份
		minYear: {
			type: [Number, String],
			default: 1900
		},
		// 最小可选日期(不在范围内日期禁用不可选)
		minDate: {
			type: [Number, String],
			default: "1900-01-01"
		},
		/**
		 * 最大可选日期
		 * 默认最大值为今天，之后的日期不可选
		 * 2030-12-31
		 * */
		maxDate: {
			type: [Number, String],
			default: "2100-01-01"
		},
		// 弹窗顶部左右两边的圆角值
		borderRadius: {
			type: [String, Number],
			default: 20
		},
		// 是否允许通过点击遮罩关闭日历
		maskCloseAble: {
			type: Boolean,
			default: true
		},
		// 月份切换按钮箭头颜色
		monthArrowColor: {
			type: String,
			default: "#606266"
		},
		// 年份切换按钮箭头颜色
		yearArrowColor: {
			type: String,
			default: "#909399"
		},
		// 默认日期字体颜色
		color: {
			type: String,
			default: "#303133"
		},
		// 选中|起始结束日期背景色
		activeBgColor: {
			type: String,
			default: "#2979ff"
		},
		// 选中|起始结束日期字体颜色
		activeColor: {
			type: String,
			default: "#ffffff"
		},
		// 范围内日期背景色
		rangeBgColor: {
			type: String,
			default: "rgba(41,121,255,0.13)"
		},
		// 范围内日期字体颜色
		rangeColor: {
			type: String,
			default: "#2979ff"
		},
		// mode=range时生效，起始日期自定义文案
		startText: {
			type: String,
			default: "开始"
		},
		// mode=range时生效，结束日期自定义文案
		endText: {
			type: String,
			default: "结束"
		},
		//按钮样式类型
		btnType: {
			type: String,
			default: "primary"
		},
		// 当前选中日期带选中效果
		isActiveCurrent: {
			type: Boolean,
			default: true
		},
		// 切换年月是否触发事件 mode=date时生效
		isChange: {
			type: Boolean,
			default: false
		},
		// 是否显示右上角的关闭图标
		closeable: {
			type: Boolean,
			default: true
		},
		// 顶部的提示文字
		toolTip: {
			type: String,
			default: "选择日期"
		},
		showWeek: {
			type: Boolean,
			default: false
		},
		showIsToday: {
			type: Boolean,
			default: false
		}
	},
	data: function() {
		// 组件创建时,进行数据初始化
		return {
			isShow: false
		};
	},
	mounted() {
		this.init();
	},
	methods: {
		// 初始化
		init() {},
		// 向父组件发送更新value事件
		_updateValue(value) {
			this.$emit("input", value);
			this.$emit("update:modelValue", value);
			this.$emit("change", value);
		},
		onPopupShow(value) {
			let that = this;
			that.isShow = value;
			that.$emit("update:show", value);
		},
		// 监听 - 值改变事件
		onChange(e) {
			let that = this;
			let data = that.getData(e);
			that._updateValue(data);
		},
		getData(obj = {}) {
			let that = this;
			let { mode } = that;
			if (mode === "date") {
				// 单选
				return that.getTime(obj);
			} else if (mode === "range") {
				// 多选
				let {
					startYear,
					startMonth,
					startDay,
					startDate,
					endYear,
					endMonth,
					endDay,
					endDate
				} = obj;
				let startTime = that.getTime({
					year: startYear,
					month: startMonth,
					day: startDay,
					hour: 0,
					minute: 0,
					second: 0
				});
				let endTime = that.getTime({
					year: endYear,
					month: endMonth,
					day: endDay,
					hour: 0,
					minute: 0,
					second: 0
				});
				return [startTime, endTime];
			}
		},
		getTime(obj) {
			let { year, month, day, hour, minute, second } = obj;
			let text = "";
			if (year) {
				text += year;
			}
			if (month) {
				text += "/" + month;
			}
			if (day) {
				text += "/" + day;
			}
			if (hour) {
				text += " " + hour;
			}
			if (minute) {
				text += ":" + minute;
			}
			if (second) {
				text += ":" + second;
			}
			text = text.trim();
			return new Date(text).getTime();
		},
		isToday(date) {
			let todaysDate = new Date();
			todaysDate.setHours(0, 0, 0, 0);
			date.setHours(0, 0, 0, 0);
			let str = "";
			let cha = todaysDate.getTime() - date.getTime();
			if (cha === 0) {
				str = "（今天）";
			} else if (cha === -86400000) {
				str = "（明天）";
			} else if (cha === -86400000 * 2) {
				str = "（后天）";
			} else if (cha === 86400000) {
				str = "（昨天）";
			}
			return str;
		}
	},
	// 监听器
	watch:{
		show(newVal){
			this.isShow = newVal;
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		valueToTextCom() {
			let that = this;
			let { valueCom, mode, vk, showWeek, showIsToday } = that;
			let str = "";
			if (vk.pubfn.isNotNull(valueCom)) {
				if (mode === "date") {
					// 单选
					str = vk.pubfn.timeFormat(valueCom, "yyyy年MM月dd日");
					let date = new Date(valueCom);
					let myddy = date.getDay(); //获取存储当前日期
					if (showWeek) {
						let weekday = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
						str += ` ${weekday[myddy]}`;
					}
					if (showIsToday) {
						str += that.isToday(date);
					}
				} else if (mode === "range") {
					// 多选
					let str1 = vk.pubfn.timeFormat(valueCom[0], "yyyy年MM月dd日");
					let str2 = vk.pubfn.timeFormat(valueCom[1], "yyyy年MM月dd日");
					str = `${str1} 至 ${str2}`;
				}
			}
			return str;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-data-input-calendar {
	position: relative;
	-webkit-box-flex: 1;
	padding: 0px;
	border-color: rgb(220, 223, 230);
	text-align: left;
	width: 100%;
}
</style>
